<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>545在线-装扮制作</title>
    <link href="/public.css" rel="stylesheet">
    <!--从b站css里抄来的字体-->
    <style>
        @font-face {
            font-family: fans num;
            src: url(./cardres/fansnum.ttf)
        }
    </style>
    <!--思源黑体-->
    <link crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400&display=swap"
        rel="stylesheet">
    <link crossorigin="anonymous"
        integrity="sha512-tH5CEoO7QorGJK5RZrcKozo5xe0qC0UgOhjkIoqXNVe9ApFAjJRbVFzDfVvdRUSOJ5g2Pw9VzzOBguouzhLoIQ=="
        href="https://lib.baomitu.com/material-components-web/6.0.0/material-components-web.min.css" rel="stylesheet">
    <script crossorigin="anonymous"
        integrity="sha512-5zCl3JhN4Fqq6+irTX1v8J+77hwL54zTbrdl2Dl8YHe+KGcuV14C01u/uWFrSg+kZgOfGMneoUySVHqEgdRaPQ=="
        src="https://lib.baomitu.com/material-components-web/6.0.0/material-components-web.min.js"></script>
    <link crossorigin="anonymous"
        href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/material-design-icons/3.0.2/iconfont/material-icons.min.css"
        rel="stylesheet">
    <style>
        #cardContainer {
            aspect-ratio: 39/16;
            width: 100vw;
        }

        #headImg {
            object-fit: cover;
            position: absolute;
            height: 6.83760683760684vw;
            width: 6.83760683760684vw;
            border: 0.28490028490028vw solid white;
            top: 2.84900284900285vw;
            left: 3.41880341880342vw;
            border-radius: 10vw;
        }

        #baseImg {
            object-fit: cover;
            position: absolute;
            height: 41.02564102564103vw;
            width: 100vw;
        }

        #username {
            position: absolute;
            font-family: 'Noto Sans SC', sans-serif;
            font-weight: 400;
            left: 12.6vw;
            top: 5.8vw;
            line-height: 3.7vw;
            font-size: 3.7vw;
            color: rgba(255, 255, 255, 0.9);
        }

        .infotext {
            font-family: 'Noto Sans SC', sans-serif;
            font-weight: 300;
            color: rgba(233, 233, 233, 0.7);
            position: absolute;
            line-height: 3.75vw;
            font-size: 3.75vw;
            left: 3.3vw;
        }

        #fansinfo {
            top: 15.8vw;
        }

        #dateinfo {
            top: 31.1vw;
        }

        #num {
            left: 3.4vw;
            top: 22.8vw;
            line-height: 5.13vw;
            font-size: 5.13vw;
            position: absolute;
            font-family: fans num;
            color: white;
        }

        #date {
            font-family: 'Noto Sans SC', sans-serif;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.9);
            ;
            position: absolute;
            left: 3.4vw;
            top: 36.2vw;
            line-height: 3.5vw;
            font-size: 3.5vw;
        }

        [contenteditable] {
            user-select: text;
            -webkit-user-select: text;
        }
    </style>

    <script src="/lib/html2canvas.min.js"></script>
</head>

<body style="overflow-x:hidden;">
    <div id="settings" style="height:100vh;overflow-y:auto;overflow-y: overlay;">
        <div id="cardContainer">
            <img id="baseImg" src="cardres/base.png">
            <img id="headImg" src="/icon.webp">
            <span id="username" contenteditable="true">帅比笙歌超可爱OvO</span>
            <span class="infotext" id="fansinfo">FANS NO.</span>
            <span id="num" contenteditable="true">000000</span>
            <span class="infotext" id="dateinfo">DATE</span>
            <span id="date">2021/12/30</span>
        </div>
        <br>
        <label style="width: 80%;margin-left: 10vw;" class="mdc-text-field mdc-text-field--outlined"
            data-mdc-auto-init="MDCTextField">
            <select name="background" id="background"
                style="cursor:pointer;-webkit-tap-highlight-color: transparent!important;" class="mdc-text-field__input"
                aria-labelledby="my-label-id">
                <option value="base.png">舞娘</option>
                <option value="base2.png">泳装</option>
            </select>
            <span class="mdc-notched-outline">
                <span class="mdc-notched-outline__leading"></span>
                <span class="mdc-notched-outline__notch">
                    <span class="mdc-floating-label" id="my-label-id" style="color:#DCAC89;">模板</span>
                </span>
                <span class="mdc-notched-outline__trailing"></span>
            </span>
        </label>
        <br>
        <H4 style="padding-top:12px;width:100vw;text-align: center;">点击头像/ID/编号均可编辑</H4>
        <input type="file" style="display:none;" id="hiddenImgUploader">
        <button class="mdc-button mdc-button--raised mdc-button--leading"
            style="width:80%;margin-left:10vw;margin-top:24px;" id="saveBtn">
            <span class="mdc-button__ripple"></span>
            <i class="material-icons mdc-button__icon" aria-hidden="true">cloud_download</i>
            <span class="mdc-button__label" id="downBtnLabel">保存图片</span>
        </button>
    </div>
    <script>
        window.mdc.autoInit();
        const today = new Date()
        document.getElementById("date").innerText = today.getFullYear() + "/" + (today.getMonth() + 1).toString().padStart(2, "0") + "/" + today.getDate().toString().padStart(2, "0");
        document.getElementById("saveBtn").addEventListener("click", () => {
            html2canvas(document.querySelector("#cardContainer")).then(canvas => {
                let eleLink = document.createElement('a');
                eleLink.download = "我的笙歌装扮.webp";
                eleLink.style.display = 'none';
                eleLink.href = canvas.toDataURL("image/webp", 1.0);;
                document.body.appendChild(eleLink);
                eleLink.click();
                document.body.removeChild(eleLink);
            });
        });
        document.getElementById("hiddenImgUploader").addEventListener("change", (e) => {
            let target = e.target || e.srcElement;
            let file = target.files[0];
            var reader = new FileReader();
            reader.onload = (data) => {
                let res = data.target || data.srcElement;
                document.getElementById("headImg").src = res.result;
            }
            reader.readAsDataURL(file)
        });
        document.getElementById("background").addEventListener("change", (e) => {
            document.getElementById("baseImg").src = "cardres/" + document.getElementById("background").value;
        });
        document.getElementById("headImg").addEventListener("click", () => {
            document.getElementById("hiddenImgUploader").click();
        });
        fetch((navigator.userAgent === "545LocalPlayer") ? "http://127.0.0.1:60510/https://api.bilibili.com/x/relation/stat?vmid=15641218&jsonp=jsonp&ForceNoCache=1" : "https://biliapi.qinlili.bid/follow?uid=15641218&ForceNoCache=1").then(resp => resp.json().then(json => {
            if (json.code == 0) {
                document.getElementById("num").innerText = json.data.follower.toString().padStart(6, "0");
            }
        }).catch()).catch()
    </script>
</body>

</html>